---
title: Progress
description: Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app’s state and indicate available actions, such as whether users can navigate away from the current screen.
docType: Demo
docGroup: Components
group: Feedback
alias: [Loading Spinner]
components: [CircularProgress, LinearProgress]
---

# Progress

[Progress indicators](https://m2.material.io/components/progress-indicators#usage)
inform users about the status of ongoing processes, such as loading an app,
submitting a form, or saving updates. They communicate an app’s state and
indicate available actions, such as whether users can navigate away from the
current screen.

> !Info! All progressbar components require an `aria-label` or `aria-labelledby`
> for accessibility. The label will probably be `"Loading"` for most use cases,
> but could also be things like:
>
> - An `id` of a `Dialog` title
> - An `id` of a `Button`
> - An `id` of a heading element
> - etc

## Circular Progress

Circular progress indicators display progress by animating an indicator along an
invisible circular track in a clockwise direction. They can be applied directly
to a surface, such as a button or card.

The default behavior for a circular progress bar is to be centered within the
container element and spin indefinitely.

```demo source="./SimpleCircularProgress.tsx"

```

### Determinate Circular Progress

If the progress state is quantifiable in a range from 0% - 100%, provide that
value to the `CircularProgress` component to create a determinate progress bar.
The progress bar will grow as the value expands to show the current state to the
user.

```demo source="./DeterminateCircularProgress.tsx"

```

### Circular Progress Sizes

The `CircularProgress` also supports a `dense` size:

```demo source="./CircularProgressSizes.tsx"

```

### Circular Progress Theme

The `CircularProgress` bar supports all the different theme colors and the current text color.

```demo source="./CircularProgressTheme.tsx"

```

### Performance Concerns

When running CPU intensive tasks, the `CircularProgress` animation might appear
sluggish because it animates using a rotate and a scaling stroke-dashoffset. It
is recommended to move CPU intensive tasks to a
[Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
when possible, but the animation can be simplified to only a rotation by
enabling the `disableShrink` prop.

```demo source="./PerformanceConcerns.tsx"

```

## Linear Progress

Linear progress indicators support both determinate and indeterminate operations.

- **Determinate** operations display the indicator increasing in width from 0 to
  100% of the track, in sync with the process’s progress.
- **Indeterminate** operations display the indicator continually growing and
  shrinking along the track until the process is complete.

```demo source="./SimpleLinearProgress.tsx"

```

### Linear Progress Theme

The `LinearProgress` bar _kind of_ supports all the different theme colors and
the current text color. The colors will probably need to be modified to be more
visible based on the background color.

```demo source="./LinearProgressTheme.tsx"

```

## Disable Determinate Transition

The determinate circular and linear progress bars animate to the next value after `200ms`
which might cause a delay if the value updates more quickly than that. In those cases,
enable the `disableTransition` prop.

```demo source="./DisableDeterminateTransition.tsx"

```

## Within Buttons

Check out the [Async Button](/components/button#async-button) to see how
circular and linear progress bars can be rendered within buttons.
